<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px" size="mini">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目区域" prop="projectRegion">
            <el-select v-model="form.projectRegion" placeholder="请选择">
              <el-option v-for="dict in dict.type.cld_project_region" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="form.projectName" placeholder="请输入项目名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入公司名称"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目业态" prop="projectBusiness">
            <el-select v-model="form.projectBusiness" placeholder="请选择">
              <el-option v-for="dict in dict.type.cld_project_business" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类型" prop="projectType">
            <el-select v-model="form.projectType" placeholder="请选择">
              <el-option v-for="dict in dict.type.cld_project_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="片区经理" prop="staffName">
            <el-input v-model="form.staffName" :disabled="true" class="input-with-select" placeholder="请选择">
              <el-button slot="append" @click="handleSelectStaffOpen">选择</el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="负责人" prop="headPerson">
            <el-input v-model="form.headPerson" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话" prop="headPhone">
            <el-input v-model="form.headPhone" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采集人" prop="collectionUserId">
            <el-select v-model="form.collectionUserId" filterable placeholder="请选择">
              <el-option v-for="item in personOptions" :key="item.userId" :label="item.nickName" :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目地址" prop="location">
            <el-cascader v-model="form.location" :options="addressOptions" :props="{ value: 'label' }"
                         placeholder="请选择" @change="handleLocationChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入详细地址"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="项目描述" prop="projectDesc">
        <el-input v-model="form.projectDesc" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入"
                  type="textarea"/>
      </el-form-item>
    </el-form>

    <!-- 选择人员 -->
    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isStaffOpen" append-to-body title="选择人员"
               width="70%">
      <SelectedStaff v-if="isStaffOpen" :isProject="false" :params="{ staffJobNotNull: 1, staffStatuss: '1,2' }"
                     @childInput="handleSelectedStaff">
      </SelectedStaff>
    </el-dialog>
  </div>
</template>
<script>
import {addProject, getProject, updateProject} from "@/api/cld/project";
import {getSysUserList} from "@/api/system/user";
import SelectedStaff from '@/views/cld/staff/selectedStaff';
import addressOptions from '@/assets/address.json'

export default {
  props: {
    projectId: {
      type: Number
    }
  },
  components: {
    SelectedStaff
  },
  dicts: ['cld_project_type', 'cld_project_business', 'cld_project_region',
    'cld_invoice_type', 'cld_payment_type', 'cld_project_post_estimate',
    'cld_project_other_expe', 'cld_assets_type',
    'cld_project_post', 'cld_project_groups'],
  data() {
    return {
      form: {},
      // 表单校验
      rules: {
        projectRegion: [
          {required: true, message: "项目区域不能为空", trigger: "blur"}
        ],
        projectName: [
          {required: true, message: "项目名称不能为空", trigger: "blur"}
        ],
        companyName: [
          {required: true, message: "公司名称不能为空", trigger: "blur"}
        ],
        projectBusiness: [
          {required: true, message: "项目业态不能为空", trigger: "blur"}
        ],
        headPerson: [
          {required: true, message: "负责人不能为空", trigger: "blur"}
        ],
        headPhone: [
          {required: true, message: "电话不能为空", trigger: "blur"}
        ],
        collectionUserId: [
          {required: true, message: "采集人不能为空", trigger: "blur"}
        ],
        userId: [
          {required: true, message: "营运经理不能为空", trigger: "blur"}
        ],
        projectType: [
          {required: true, message: "项目类型不能为空", trigger: "blur"}
        ],
        location: [
          {required: true, message: "项目地址不能为空", trigger: "blur"}
        ],
        address: [
          {required: true, message: "详细地址不能为空", trigger: "blur"}
        ]
      },
      // 选择员工弹框
      isStaffOpen: false,
      staffOptions: [],
      personOptions: [],
      // 省市区选择
      addressOptions: addressOptions,
    }
  },

  created() {
    this.handleGetListSysUser();
    this.reset()
    if (this.projectId) {
      this.handleGetProjectInfo();
    }
  },
  mounted() {

  },
  methods: {
    // 获取用户列表
    handleGetListSysUser() {
      getSysUserList().then(res => {
        this.personOptions = res.data;
      })
    },
    handleGetProjectInfo() {
      getProject(this.projectId).then(response => {
        this.form = response.data;
        this.form.location = [];
        this.form.location[0] = this.form.province;
        this.form.location[1] = this.form.city;
        this.form.location[2] = this.form.county;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        projectId: null,
        projectNo: null,
        projectRegion: null,
        projectName: null,
        projectBusiness: null,
        projectType: null,
        headPerson: null,
        headPhone: null,
        collectionUserId: this.$store.getters.userId,
        userId: null,
        projectStatus: null,
        projectDesc: null,
        province: null,
        city: null,
        county: null,
        address: null,
        longitude: null,
        latitude: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.projectId != null) {
            updateProject(this.form).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.$emit('success');
            });
          } else {
            addProject(this.form).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.$emit('success');
            });
          }
        }
      });
    },
    /** 所在地区选择 */
    handleLocationChange(e) {
      this.form.province = e[0];
      this.form.city = e[1];
      this.form.county = e[2];
    },
    // 打开员工选择
    handleSelectStaffOpen() {
      this.isStaffOpen = true;
    },
    // 员工选择
    handleSelectedStaff(data) {
      this.form.staffName = data.staffName;
      this.form.userId = data.staffId;
      this.isStaffOpen = false;
    },
  }
}

</script>
<style scoped>
.el-select {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
